<template>
    <div class="user-page" > 
        <!--登录-->
        <div class="login-panel">
            <img class="img" src="../../../../static/image/xxm/user-bg.png"/> 
            <div class="head_box"  :style="'padding-top:'+headPadding+'rpx'">
                <div class="nav text-center">我的</div> 
                <div class="head">
                    <image-loader  :src="is_register==2?'../../../../static/image/xxm/default-head.png':userInfo.wx_header" image-style=" width: 160rpx; height: 160rpx; border-radius: 50%;" ></image-loader>    
                </div>
                <div class="text-center" style="color:#fff;" v-if="is_register==1">{{userInfo.nickname}}</div>   
                <button class="login text-center" v-else open-type="getUserInfo" @getuserinfo="agreeGetUser">登录</button>
            </div>  
        </div>

        <div class="item item-first" @click="jumpPageUrl('openPublishRecord')">
            <div class="left">
                <img class="icon" src="../../../../static/image/xxm/user-icon-record.png"/>
                发布记录
            </div>
            <div class="right">></div>
        </div>


        <div class="item"  @click="jumpPageUrl('openUserMsg')">
            <div class="left">
                <img class="icon" src="../../../../static/image/xxm/user-icon-msg.png"/>
                消息通知
            </div>
            <div class="right">></div>
        </div>

        <div class="item" @click="jumpPageUrl('openUserLink')">
            <div class="left">
                <img class="icon" src="../../../../static/image/xxm/user-icon-customer.png"/>
                联系客服
            </div>
            <div class="right">></div>
        </div>

        <div class="item" @click="jumpPageUrl('openUserAbout')">
            <div class="left">
                <img class="icon" src="../../../../static/image/xxm/user-icon-about.png"/>
                关于我们
            </div>
            <div class="right">></div>
        </div>
        <login-null v-if="loginNullShow" mode="modal" @close="closeModal"></login-null>
    </div>
</template>
<script>
import * as api from '@/utils/api' ;
import loginNull from '@/components/login-null.vue' 
const app = getApp()
export default {
    onLoad(){

    },
    onShow: function () {

    },

    data () {
        return {
            headPadding:wx.getStorageSync('headPadding'), 
            headHeight:wx.getStorageSync('headHeight'), 
            is_register:wx.getStorageSync('is_register'),//是否注册过
            userInfo:wx.getStorageSync('userInfo'),
            form:{ 
                nick_name:1,
                sex:'',
                avatar_url:'', //头像  
            }, 
            loginNullShow:false,
        }
    },

    components:{
        loginNull
    },
    methods: {
        jumpPageUrl(type){
            if(wx.getStorageSync('is_register')!=1){
                this.loginNullShow=true;
            }else{
                if(type=='openPublishRecord'){
                    wx.navigateTo({url:'../user-publish-record/main'})
                }else if(type=='openUserMsg'){
                    wx.navigateTo({url:'../user-msg/main'})
                }else if(type=='openUserAbout'){
                    wx.navigateTo({url:'../user-about/main'})
                }else if(type=='openUserLink'){
                    wx.navigateTo({url:'../user-link/main'})
                }
            }
        }, 
        //用户授权注册
        agreeGetUser(e) { 
            let vm = this;
            if (e.mp.detail.errMsg == 'getUserInfo:fail auth deny') {
                // wx.showModal({
                //   title: '用户未授权',
                //   content: '如需正常使用小程序，需要获取你的基本信息，请您开启授权服务',
                //   showCancel: false,
                // })
            } else {   
                vm.form.nick_name=e.mp.detail.userInfo.nickName;
                vm.form.sex=e.mp.detail.userInfo.gender;
                vm.form.avatar_url=e.mp.detail.userInfo.avatarUrl;
                vm.userRegister();
            }
        },
        //注册
        userRegister(){
            let vm = this; 
            vm.form.open_id=wx.getStorageSync('openId');
            api.register(vm.form).then(res=>{ 
                if(res.data.code==200){
                    wx.setStorageSync('is_register',1); 
                    wx.setStorageSync('userInfo',res.data.data); 
                    vm.is_register=1;
                    vm.userInfo=res.data.data;
                    vm.$forceUpdate();
                } 
            }).catch(err=>{

            })
        },
        //关闭登录框
        closeModal(){
            this.loginNullShow=false;
            this.is_register=wx.getStorageSync('is_register');
            this.userInfo=wx.getStorageSync('userInfo');
        },
    },
}
</script>

<style lang="scss" scoped>
.user-page{
    width:100%;
    height:100%;
    color:#000;
    background:#F1F2F7; 

    //登录
    .login-panel{
        width: 100%;
        height: 554rpx;
        position: relative;
        // align-items: center;
        // flex-direction: column;
        // flex-wrap: wrap;
        // justify-content: center; 
        .img{
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            z-index: 1;
        }
        .head_box{
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            z-index: 2;
            .nav{
                width:100%; 
                color:#fff;
            }
            .head{
                display: block;
                margin:60rpx auto 36rpx; 
                width: 160rpx;
                height: 160rpx;
                border-radius: 50%;
                border:2px solid #fff;
                overflow: hidden;
            }
            .login{
                width:300rpx;
                height:88rpx;
                // background:linear-gradient(0deg,rgba(77,141,249,1),rgba(86,117,254,1));
                background:transparent;
                box-shadow:0px 2rpx 7rpx 0px rgba(82,127,252,0.48);
                border-radius:44rpx;
                font-size: 30rpx;
                color: #ffffff;
                line-height: 88rpx; 
                border:1rpx solid #fff;
            }
        }
        
    }

    .item{
        margin-top: 4rpx;
        padding: 0 32rpx;
        width: 100%;
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size:30rpx;
        font-weight:600;
        background: #ffffff;

        .left{
            display:inline-flex;
            align-items:center;
            img{margin-right:21rpx;width:35rpx;height:35rpx;}
        }
    }
    .item-first{
        margin-top:20rpx !important;
    }
}
</style>
